<template>
  <view class="page custom-page">
    <custom-head gradient back title="搜索">
      <view class="tool" slot="right">
      </view>
    </custom-head>

    <view class="search flex a-center">
      <view class="search-input">
        <i class="iconfont icon-sousuo1"></i>
        <input type="search" confirm-type="search" placeholder="请输入学号/姓名" v-model="searchName"/>
      </view>
      <view class="submit"  @click="handleSearch">搜索</view>
    </view>

    <view v-if="showSearch === 1" class="content_1_page">
      <view>
        <view class="title">班级筛选</view>
        <view class="item" >
          <view class="text" :class="{active: item.checked}" v-for="item in list" @click="handleActive(item)">{{ item.name }}</view>
        </view>
      </view>
    </view>


    <view class="studentList" v-else-if="showSearch === 2">
      <view class="student">
        <scroll-view :scroll-y="true" :scroll-top="scrollTop" style="height: 100%;">
        <u-index-list v-if="indexList.length > 0" :scrollTop="scrollTop" :sticky="false" :index-list="indexList" >
            <view v-for="(item, index) in indexList" :key="index">
              <u-index-anchor :index="item" />
              <view
                class="student-item flex a-center"
                v-for="student in studentList[item]"
                @tap="enter('/pages/student/information', student.id)"
              >
                <view class="touxiang">
                  <image :src="student.avatar" />
                </view>
                <view class="info">
                  <view class="title"
                    >{{ student.name }} <span>（学号{{ student.student_number }}）</span>
                  </view>
                  <view class="text flex a-center">
                    <span>冷水江格致教育</span>
                    <view class="integral">积分: {{ student.integration }}</view>
                  </view>
                </view>
              </view>
            </view>

            </u-index-list>
            <view v-else class="noData">暂无数据</view>
          </scroll-view>
      </view>
    </view>

  </view>
</template>
<script>
import { getStudent } from '../../api/modules/student'
import { textToPy, pinyinSort } from '../../utils/index'

export default {
  data() {
    return {
      searchName: '',
      showSearch: 1, // 显示页面
      list: [],
      // /////////////////////
      scrollTop: 0,
      indexList: [],
      studentList: [],
      initStudentList: [],
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
      classId: null, // 选中的班级id
    }
  },

  mounted() {
    console.log('全局', getApp().globalData.glb_list.classList)
    this.list = getApp().globalData.glb_list.classList.filter(i => i.sid === this.glbId).map(i => ({...i, checked: false}))
    this._getStudent();
  },

  methods: {

    handleActive(param) {
      if (param?.checked) {
        this.list = this.list.map(i => ({...i, checked: false }))
        this.classId = '';
      } else {
        this.classId = param.id
        this.list = this.list.map(i => ({...i, checked: i.id === param.id }))
      }
    },
    handleSearch() {
      let backList = [];
      this.getSearchItem(this.initStudentList, backList, this.searchName)

      if (this.classId) {
        backList = backList.filter(i => {
          return [i.cid1, i.cid2, i.cid3, i.cid4, i.cid5].includes(this.classId)
        })
      }

      this.studentList = pinyinSort(backList);
      this.indexList = Object.keys(pinyinSort(backList))

      if(!this.searchName) {
        this.showSearch = 1;
      } else {
        this.showSearch = 2;
      }
    },
    getSearchItem(arr, backList, param) { // 拿到input 处理好的数据
      for(const item of arr) {
        if (Array.isArray(item)) {
          this.getSearchItem(item, backList, param)
        } else {
          if (item && item.name === param) {
            backList.push(item)
          } else if(item && item.student_number === param) {
            backList.push(item)
          }
        }
      }
    },
    enter(path, id) {
      uni.navigateTo({
        url: `${path}?id=${id}`
      })
    },
    _getStudent() {
      const list = this.glbSchool.students.map(item => ({...item, pname: textToPy(item.name)}));
      this.initStudentList = list
      const tempArr = pinyinSort(list)

      this.studentList = tempArr
      this.indexList = Object.keys(tempArr)
    }
  },
}
</script>
<style scoped lang="scss">
.studentList {
  margin-top: 114rpx;
  .student {
    background-color: #fff;
    position: relative;
    padding-bottom: 100rpx;
    margin-top: 114rpx;
    height: calc(100% - 114rpx);
  }
  .student-item {
    width: 100%;
    padding: 10rpx 20rpx;

    .touxiang {
      width: 120rpx !important;
      height: 120rpx;
      border-radius: 50% !important;
      overflow: hidden;
      margin-right: 30rpx;
    }

    .touxiang image {
      width: 100%;
      height: 100%;
    }

    .info {
      flex: 1;

      .title {
        font-size: 32rpx;
        color: #303133;
        margin-bottom: 10rpx;
      }

      .title span {
        font-size: 24rpx;
      }

      .text {
        font-size: 24rpx;
        color: #303133;
      }

      .integral {
        margin-left: 65rpx;
        color: #2979ff;
        font-size: 24rpx;
        margin-top: 10rpx;
      }
    }
  }
  .noData {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120rpx;
    width: 100%;
  }
} 
.content_1_page {
  margin-top: 114rpx;
  padding: 57rpx 57rpx 60rpx;
  .title {
    font-size: 30rpx;
    font-weight: 500;
    color: #9A9CA2;
    margin-bottom: 33rpx;
  }

  .item {
    display: flex;
    flex-wrap: wrap;
    font-size: 24rpx;
    font-weight: 500;
    color: #303133;
    .text {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5rpx 25rpx;
      background: #EFEFEF;
      border-radius: 28rpx;
      margin: 0 22rpx;
      margin-bottom: 21rpx;
    }

    .active {
      background-color: #eaf4ff;
      border: 1rpx solid #accdff;
    }
  }
}
.fenlei {
  color: #fff;
  font-size: 50rpx;
}

.page {
  height: 100vh;
  background-color: #fff;
}

.search {
  width: 100%;
  height: 114rpx;
  background-color: #f3f4f5;
  padding: 25rpx 30rpx;
  position: fixed;
  top: calc(44px + var(--status-bar-height));
  z-index: 2;
  left: 0;

  .submit {
    font-size: 24rpx;
    color: #303133;
    padding: 0 30rpx;
    line-height: 64rpx;
  }
}

.search-input {
  flex: 1;
  background-color: #fff;
  height: 64rpx;
  border-radius: 32rpx;
  position: relative;

  input {
    font-size: 24rpx;
    color: #666;
    line-height: 64rpx;
    outline: none;
    background: none;
    height: 64rpx;
    padding-left: 60rpx;
  }

  i {
    position: absolute;
    left: 15rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 36rpx;
    color: #8f9399;
  }
}

</style>
